<template>
    <div class="login">
        <form action="">
            <p>管理员登录</p>
            <div class="account">
                <div><el-icon>
                        <UserFilled />
                    </el-icon></div>
                <input type="text" v-model="user.account" placeholder="请输入账号">
            </div>
            <div class="password">
                <div><el-icon>
                        <Lock />
                    </el-icon></div>
                <input type="text" v-model="user.password" placeholder="请输入密码">
            </div>
            <div class="verif">
                <div><el-icon>
                        <Key />
                    </el-icon></div>
                <input type="text" v-model="user.captcha" placeholder="请输入验证码">
                <canvas ref="canvas" @click="getVer"></canvas>
            </div>
            <div class="forget">
                <span>忘记密码？</span>
            </div>
            <div class="loginbtn" @click="singinFn"><b>登录</b></div>
        </form>
    </div>
</template>
<style lang="scss" scoped>
@import '../common/variable.scss';

.login {
    // 渐变背景
    background: linear-gradient(to bottom right, #f7e0aa, #cb86d9);
    height: 100vh;
    width: 100%;
    position: relative;

    form {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: $bgColor3;
        height: 350px;
        width: 450px;
        border-radius: 10px;
        box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        padding: 10px;

        input {
            border: 1px solid #ccc;
            padding: 5px;
            width: 60%;
        }

        p {
            font-size: 20px;
            color: skyblue;
            font-weight: bold;
            border-bottom: 2px solid;
            text-align: center;
            padding-bottom: 5px;
        }

        div {
            display: flex;
            margin: 10px;
        }

        canvas {
            margin-left: 2px;
            border: 1px solid #ccc;
        }

        div>div {
            font-weight: bold;
            font-size: 20px;
        }

        span {
            font-size: 12p;
            color: #ccc;
            transform: translateX(10px);
        }

        .loginbtn {
            background-color: #548bff;
            height: 50px;
            width: 50%;
            margin-left: 50%;
            transform: translateX(-50%);
            color: white;
            font-weight: bold;
            border-radius: 10px;

            b {
                margin-left: 50%;
                transform: translate(-50%, 30%)
            }
        }

    }
}
</style>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 导入接口
import api from '../api/index'
import { ElMessage } from 'element-plus'
import { singin, test } from '../api/request'
import { useRouter } from 'vue-router'
// 路由
const $router = useRouter()

let host: string = api.url
// 验证码...........................................
let canvas = ref();
// 获取验证码
const getVer = () => {
    let img = new Image();
    // 设置随机数拼接到url中，防止缓存
    img.src = `${host}/api/verify/captcha?` + Math.random();
    let ele = canvas.value;
    if (ele) {
        ele.width = 100;     // 设置画布宽度
        ele.height = 41;     // 设置画布高度
        let ctx = ele.getContext('2d');
        // 清除画布
        ctx.clearRect(0, 0, ele.width, ele.height);
        // 绘制验证码
        img.onload = function () {
            ctx.drawImage(img, 0, 0, 100, 41);
        }
    }
}

// 管理员登录..............................................
// 记录表单信息
type U = {
    account: string
    password: string
    captcha: string
}
let user = ref<U>({
    account: '',
    password: '',
    captcha: ''
})

// 编写登录函数
const singinFn = async () => {
    let { account, password, captcha } = user.value;
    if (account && password && captcha) {
        // 先验证验证码
        let isShow;
        await test({ captcha })
            .then(
                content => {
                    if(content.code==200){
                        isShow=true;
                    }
                    else{
                        ElMessage({
                            type:'error',
                            message:content.msg
                        })
                    }
                }
            )
            if(isShow){
                await singin({data:{account,password,role:1}})
                .then(
                    content=>{
                        let {code,msg}=content;
                        if(code==200){
                            let {nickName,token}=content;
                            // 缓存本地token临时身份,用户昵称
                            localStorage.setItem('token',token);
                            localStorage.setItem('nickName',nickName);
                            ElMessage({
                                type:'success',
                                message:content.msg
                            })            
                            // 延时跳转首页
                            setTimeout(()=>{
                                $router.replace('/')
                            },100)   
                        }
                        else{
                            ElMessage({
                                type:'error',
                                message:content.msg
                            })
                            
                        }
                    }
                )
            }
    }
    else {
        ElMessage({
            message: '提示,输入框不能为空~~',
            type: 'warning',
        })

    }
}






// 初始化钩子
onMounted(() => {
    getVer();
})



</script>